<template>
  <div class="all">
    <a-breadcrumb class="location">
      <a-breadcrumb-item>Leads</a-breadcrumb-item>
      <a-breadcrumb-item>Leads list</a-breadcrumb-item>
    </a-breadcrumb>
    
    <div class="topbox">
      <a-row class="navTab clearfix">
        <a-col :span="18" class="lnv">
          <a-row :gutter="30" style="margin-left: 0; margin-right: 0;">
            <a-col :span="item1.span" class="item" v-for="(item1, index1) in navList" :key="index1" @click.native="changeNav(index1)">
              <div class="ite" :class="item1.active === 1 ? 'active' : '' ">{{item1.title}}</div>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="2" class="rnew clearfix">
          <div class="box" @click="addNEwHandle">
            <img src="~@/assets/img/leads-add.png" alt="" class="pic"/>
            New
          </div>
        </a-col>
      </a-row>
    </div>
    
    <!-- 分页和搜索 -->
    <a-row style="margin-bottom: 20px;" class="clearfix">
      <!-- 分页 layout="total, sizes, prev, pager, next, jumper" -->
      <a-col :span="11" style="height: 40px;">
        <div class="grid-content bg-purple-light">
          <el-pagination
            background
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :defaultCurrent="6"
            :total="totalPage"
            style="margin: 0; text-align: left; background:#E9EFFF; border-radius:2px; display: inline-block;"
            layout="prev, pager, next, jumper">
          </el-pagination>
        </div>
      </a-col>
      
      <!-- 搜索 -->
      <a-col :span="13" class="clearfix ssboxes" style="height: 40px;">
        <div class="senior">
          <div class="inbx">
            Advanced Search
            <a-icon type="down" />
          </div>
        </div>

        <div class="rsearch">
          <el-input placeholder="" class="sript" v-model="dataForm.key" clearable  @keyup.enter.native="toSearchHandle">
            <el-button slot="append" @click="toSearchHandle" icon="el-icon-search" style="background: #E6E6E6; font-size: 16px; font-weight: 700; color: #17B3A3;"></el-button>
          </el-input>
        </div>
      </a-col>
    </a-row>

    <el-table
      :data="dataList"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      class="theTable"
      :row-style="tableRowStyle"
      :header-cell-style="firstCellStyle"
      :cell-style="cellStyle"
      @row-dblclick="tabrowDbClick"
      :span-method="arraySpanMethod"
    >
      <el-table-column width="220" prop="username" header-align="left" align="left" label="Name" class-name="sameColumn">
        <template slot-scope="scope">
          <div class="nmcol-nm" @click="tabrowDbClick(scope.row)">{{scope.row.username}}</div>
          <div class="nmcol-mobile">{{scope.row.mobile}}</div>
          <div class="nmcol-time">{{scope.row.createTime}}</div>
          <div class="nmcol-email" @click="showEmailTempModal(scope.row)">{{scope.row.email}}</div>
        </template>
      </el-table-column>

      <el-table-column prop="useSearches" header-align="left" align="center" label="Searches" class="seboxes" style="padding: 0;" class-name="sameColumn">
        <template slot-scope="scope">
          <div class="tnvBox clearfix">
            <div class="item">{{scope.row.useSearches}}</div>
            <div class="item">{{scope.row.useVisits}}</div>
            <div class="item">{{scope.row.useProps}}</div>
            <div class="item">{{scope.row.useFavs}}</div>
            <div class="item">{{ scope.row.useAvgPrice | fmtNum }}</div>
          </div>
          <div class="botBox">
            <p class="p">Area : {{scope.row.leadDtlArea ? scope.row.leadDtlArea : 'Unknown'}}</p>
            <!-- <p class="p">Last Search: $50,000 - $350,000 , type: Condo</p> -->
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="useVisits" header-align="left" align="center" label="Visits" class-name="sameColumn"/>
      <el-table-column prop="useProps" header-align="left" align="center" label="Props" class-name="sameColumn" />
      <el-table-column prop="useFavs" header-align="left" align="center" label="Favs" class-name="sameColumn" />
      <el-table-column prop="useAvgPrice" header-align="left" align="center" label="Price" class-name="sameColumn">
        <template slot-scope="scope">
          {{ scope.row.useAvgPrice | fmtNum }}
        </template>
      </el-table-column>
      

      <el-table-column width="170" prop="useStartDate" header-align="left" align="left" label="Start Date" class-name="sameColumn">
        <template slot-scope="scope">
          <div class="inb" style="height: 120px; padding: 4px 60px 0 21px;">
            <div style="font-size: 14px; color: #384157;" v-show="scope.row.useStartDateDays">{{scope.row.useStartDateDays}}Days Ago</div>
            <div>{{dateFormatEN(scope.row.useStartDate)}}</div>
          </div>
        </template>
      </el-table-column>

      <el-table-column width="170" prop="useActiveDate" header-align="left" align="left" label="Active Date" class-name="sameColumn">
          <template slot-scope="scope">
            <div class="inb" style="height: 120px; padding: 4px 60px 0 21px;">
              <div style="font-size: 14px; color: #384157;" v-show="scope.row.useActiveDateDays">{{scope.row.useActiveDateDays}}Days Ago</div>
              <div>{{dateFormatEN(scope.row.useActiveDate)}}</div>
            </div>
          </template>
      </el-table-column>

      <el-table-column width="220" prop="agent" header-align="left" align="left" label="Agent&Lender" class-name="sameColumn">
        <template slot-scope="scope">
          <div class="userTableAgent" style="height: 120px; padding: 4px 60px 0 21px;">
            <div class="tit" style="font-size: 14px; color: #1890FF; margin-bottom: 12px;">Agent</div>
            <div class="xlbox">
              <el-select placeholder="select" v-model="scope.row.leadDtlAgent" @change="changeAgentHandle(scope.row, scope.row.leadDtlAgent)">
                <el-option v-for="(item3, index3) in scope.row.agentList" :value="item3.username" :key="index3"></el-option>
              </el-select>
            </div>
          </div>
        </template>
      </el-table-column>

      <!-- <el-table-column width="90" prop="status" header-align="left" align="center" label="Status" class-name="sameColumn">
        <template slot-scope="scope">
          <div class="inb" style="height: 120px; padding-top: 4px;">
            <span v-if="scope.row.userStatus == 1">Available</span>
            <span v-else>Disable</span>
          </div>
        </template>
      </el-table-column> -->

      <el-table-column fixed="right" prop="useSearches" header-align="left" align="center" label="Urgency" width="150" class-name="sameColumn">
        <template slot-scope="scope">
          <div class="tobax clearfix">
            <div class="email item"  @click="showEmailTempModal(scope.row)">Email</div>
            <div class="addActivity item" @click="showAddModal(scope.row)">
              <img src="~@/assets/img/add-bgwhite.png" alt="" class="photo"/>
              Activity
            </div>
          </div>
        </template>
      </el-table-column>

      <!-- <el-table-column fixed="right" header-align="left" align="center" width="150" label="Operate" class-name="sameColumn">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)" style="color: #1890FF;">Modify</el-button>
          <el-button type="text" size="small" @click="releaseHandle(scope.row)" style="color: #1890FF;">{{scope.row.status == 0 ? 'Available' : 'Forbidden'}}</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- email弹窗 -->
    <a-modal :title="'Compose Email to '+userObj.username" okText="Send" v-model="emailTempvisible" @ok="handleEmailTempOk">
      <div class="emailModal">
        <div class="tinfos">
          <div class="shitem">
            <div class="ltxt">To</div>
            <div class="rshow">
              <a-input class="ipt" v-model="sendEmailForm.to"/>
              <!-- <div class="p">jenny107@msn.com</div> -->
            </div>
          </div>

          <div class="shitem">
            <div class="ltxt">Cc</div>
            <div class="rshow">
              <a-input class="ipt" v-model="sendEmailForm.cc"/>
            </div>
          </div>

          <div class="shitem">
            <div class="ltxt">Subject</div>
            <div class="rshow">
              <a-input class="ipt" v-model="sendEmailForm.subject"/>
            </div>
          </div>

          <div class="shitem">
            <div class="ltxt">Template</div>
            <div class="rshow">
              <el-select placeholder="select" v-model="sendEmailForm.template" @change="showSelectTemplate">
                <el-option v-for="(item22, index22) in emailTepList" :value="item22.etitle" :key="index22"></el-option>
              </el-select>
            </div>
          </div>

        </div>

        <div class="dbody">
          <div class="title">Body</div>
          <div class="conbox mod-demo-ueditor" v-loading="quillUpdateImg">
            
            <!-- 图片上传组件辅助-->
            <el-upload
              class="avatar-uploader"
              :action="serverUrl"
              name="img"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :before-upload="beforeUpload">
            </el-upload>

            <quill-editor
              v-model="detailContent"
              ref="myQuillEditor"
              :options="editorOption"
              @change="onEditorChange($event)"
              @ready="onEditorReady($event)"
              @blur="onEditorBlur($event)" 
              @focus="onEditorFocus($event)"
              id="editor"
            >
            </quill-editor>

          </div>
        </div>


      </div>
    </a-modal>
    
    <!-- 弹窗: activity follow-up -->
    <a-modal title="" width="480px" v-model="addAcFollvisible" @ok="handleAddOk">
      <a-row class="theladdInf">
        <div class="ite">
          <!-- tab -->
          <a-row>
            <a-col :span="12" class="m" :class="item2.active ? 'active' : '' " v-for="(item2, index2) in typeList" :key="index2" @click.native="changeTypes(index2)">
              {{item2.title}}
            </a-col>
          </a-row>

          <!-- Activity -->
          <div class="activities clearfix" v-if="showType == 0">
            <a-row class="typeed">
              <a-col :span="4" class="txt">Type</a-col>
              <a-col :span="19" class="rbox">
                <el-select placeholder="select" v-model="activityForm.type" class="dropbox">
                  <el-option v-for="(item6, index6) in getActTypeList" :value="item6" :key="index6"></el-option>
                </el-select>
              </a-col>
            </a-row>

            <a-row class="tmdate">
              <a-col :span="4" class="txt">Time</a-col>
              <a-col :span="19" class="rbox">
                <a-date-picker showTime @change="selectAcTime" class="tmpicker">
                  <template slot="renderExtraFooter"></template>
                </a-date-picker>
              </a-col>
            </a-row>

            <a-row class="notes">
              <a-col :span="4" class="txt">Notes</a-col>
              <a-col :span="19" class="rbox">
                <a-textarea placeholder="" v-model="activityForm.notes" clearable :rows="5" class="noteTextArea" />
              </a-col>
            </a-row>

            <div class="save" @click="addActivityHandle()">
              Save
            </div>
    
          </div>

          <!-- Follow-up -->
          <div class="follow clearfix" v-if="showType == 1">
            <a-row class="user">
              <a-col :span="4" class="txt">User</a-col>
              <a-col :span="19" class="rbox">
                <el-select placeholder="select" v-model="followUpForm.user" class="dropbox">
                  <el-option v-for="(item4, index4) in getFollowUserList" :value="item4" :key="index4"></el-option>
                </el-select>
              </a-col>
            </a-row>

            <a-row class="purpose">
              <a-col :span="4" class="txt">Purpose</a-col>
              <a-col :span="19" class="rbox">
                <el-select placeholder="select" v-model="followUpForm.purpose" class="dropbox">
                  <el-option v-for="(item5, index5) in getFollowPurposeList" :value="item5" :key="index5"></el-option>
                </el-select>
              </a-col>
            </a-row>

            <a-row class="followtitle">
              <a-col :span="4" class="txt">Title</a-col>
              <a-col :span="19" class="rbox">
                <a-input placeholder="" v-model="followUpForm.title" />
              </a-col>
            </a-row>

            <a-row class="interval">
              <a-col :span="4" class="txt">Interval</a-col>
              <a-col :span="19" class="rbox">
                <a-radio-group name="radioGroup" @change="onRedioChange" v-model="followUpForm.radio" :defaultValue="1">
                  <a-radio :style="radioStyle" :value="1">On A Specific Date</a-radio>
                  <a-radio :style="radioStyle" :value="2">On A Recurring Basis</a-radio>
                </a-radio-group>
              </a-col>
            </a-row>

            <a-row class="isAllday">
              <a-checkbox @change="onCheckboxChange">Mark as "All Day" event</a-checkbox>
            </a-row>

            <a-row class="tmdate">
              <a-col :span="4" class="txt">Time</a-col>
              <a-col :span="19" class="rbox">
                <a-date-picker showTime @change="selectFollowTime" class="tmpicker">
                  <template slot="renderExtraFooter"></template>
                </a-date-picker>
              </a-col>
            </a-row>

            <!-- 重复时间 -->
            <a-row class="repeatTotal" v-show="followUpForm.radio == 2">
              <!-- day -->
              <a-row class="srday">
                <a-col :span="4" class="txt">Repeat Every</a-col>
                <a-col :span="19" class="rbox clearfix">
                  <div class="bto">
                    <div class="lb">
                      <a-input class="ipt" v-model="followUpForm.repeatEvery" allowClear/>
                    </div>

                    <div class="sel">
                      <el-select placeholder="select" v-model="followUpForm.repeatDateUnit">
                        <el-option value="Days">Days</el-option>
                        <el-option value="Weeks">Weeks</el-option>
                        <el-option value="Months">Months</el-option>
                        <el-option value="Years">Years</el-option>
                      </el-select>
                    </div>
                  </div>
                </a-col>
              </a-row>

              <!-- end -->
              <a-row class="tmdate">
                <a-col :span="4" class="txt">Ending</a-col>
                <a-col :span="19" class="rbox">
                  <a-date-picker showTime @change="selectEndRepeatTime" class="tmpicker">
                    <template slot="renderExtraFooter"></template>
                  </a-date-picker>
                </a-col>
              </a-row>
            </a-row>

            <a-row class="notes">
              <a-col :span="4" class="txt">Notes</a-col>
              <a-col :span="19" class="rbox">
                <a-textarea placeholder="" v-model="followUpForm.notes" :rows="5" class="noteTextArea" />
              </a-col>
            </a-row>

            <a-row class="reminders">
              <a-col :span="4" class="txt">Reminders</a-col>
              <a-col :span="19" class="rbox" @click="addReminderHandle">
                +Add Reminder
              </a-col>
            </a-row>

            <!-- 提醒 -->
            <div class="tixBox">
              <div class="addbox" v-show="rememinderList.length" v-for="(item7, index7) in rememinderList" :key="index7">
                <div class="text">Time before</div>
                <div class="itebox clearfix">
                  <div class="lb">
                    <a-input class="ipt" v-model="item7.val" allowClear/>
                  </div>

                  <div class="sel">
                    <el-select placeholder="select" v-model="item7.timeunit">
                      <el-option value="minutes">minutes</el-option>
                      <el-option value="hours">hours</el-option>
                      <el-option value="days">days</el-option>
                      <el-option value="weeks">weeks</el-option>
                    </el-select>
                  </div>

                  <!-- 删除 -->
                  <div class="deletes" @click="deleteReminderHandle(index7)">
                    <img src="~@/assets/img/shanchu.png" alt="" class="pho"/>
                  </div>
                </div>
              </div>
            </div>

            <div class="save" @click="addFollowUp">
              Save
            </div>
          </div>
        </div>
      </a-row>
    </a-modal>

    <!-- 弹窗: +lead -->
    <a-modal title="" width="1080px" okText="Save" v-model="addNewLeadvisible" @ok="handleNewLeadOk">
      <div class="laedsdrawBox">
        <a-row :gutter="30" class="topinfos">
          <!-- Contact Info -->
          <a-col :span="9" class="lbaseInfo">
            <a-row class="titles">Contact Info</a-row>
            <a-form class="formBox">
              <!-- First name -->
              <a-form-item label="" class="items">
                <div class="text">First name</div>
                <a-input class="ipt" allowClear v-model="newLeadsForm.firstName"/>
              </a-form-item>

              <!-- Last name -->
              <a-form-item label="" class="items">
                <div class="text">Last name</div>
                <a-input class="ipt" allowClear v-model="newLeadsForm.lastName"/>
              </a-form-item>
              
              <!-- phone number -->
              <a-form-item label="" class="items">
                <div class="text">Phone Number</div>
                <a-input class="ipt" allowClear v-model="newLeadsForm.phone"/>
              </a-form-item>

              <!-- email -->
              <a-form-item label="" class="items">
                <div class="text">Email</div>
                <a-input class="ipt" allowClear v-model="newLeadsForm.email"/>
              </a-form-item>

              <!-- logo -->
              <!-- <div class="logos clearfix">
                <div class="inx">
                  <img src="~@/assets/img/FB.png" alt="" class="photo"/>
                  <img src="~@/assets/img/T.png" alt="" class="photo"/>
                  <img src="~@/assets/img/in.png" alt="" class="photo"/>
                </div>
              </div> -->

              <!-- Secondary Contact  -->
              <div class="addSC" @click="showSecondContactHandle">
                <img src="~@/assets/img/add-bgwhite.png" alt="" class="pic"/>
                Secondary Contact
              </div>
            </a-form>
          </a-col>
          
          <!-- Additional Info -->
          <a-col :span="9" class="middleInfo">
            <a-row class="titles">Details</a-row>
              <a-form class="formBox">

                <!-- Address  -->
                <a-form-item label="" class="items">
                  <div class="text">Address</div>
                  <a-input class="ipt" allowClear v-model="newLeadsForm.leadAdtnAddress"/>
                </a-form-item>

                <!-- City -->
                <a-form-item label="" class="items citys">
                  <a-row :gutter="10" class="inrow">
                    <a-col class="theone" :span="7">
                      <div class="text">City</div>
                      <a-input class="ipt" allowClear v-model="newLeadsForm.leadAdtnCity"/>
                    </a-col>

                    <!-- St -->
                    <a-col class="theone" :span="7">
                      <div class="text">St</div>
                      <a-input class="ipt" allowClear v-model="newLeadsForm.leadAdtnState"/>
                    </a-col>
                    
                    <!-- Zip -->
                    <a-col class="theone" :span="7">
                      <div class="text">Zip</div>
                      <a-input class="ipt" allowClear v-model="newLeadsForm.leadAdtnZip"/>
                    </a-col>
                    
                  </a-row>
                </a-form-item>

                <a-form-item class="detnotes">
                  <div class="tit">Important Notes</div>
                  <div class="xl">
                    <a-textarea placeholder="" v-model="newLeadsForm.leadAdtnNotes" clearable :rows="5" class="noteTextArea" />
                  </div>
                </a-form-item>
              
              </a-form>
          </a-col>
          
          <!-- Details -->
          <a-col :span="6" class="rigInfo">
            <a-row class="titles">Additional Info</a-row>
            <a-form class="formBox">
              <!-- Type -->
              <a-form-item label="" class="items">
                <div class="text">Type</div>
                <div class="leadinfo-type">
                  <el-select placeholder="select" v-model="newLeadsForm.leadDtlType">
                    <el-option v-for="(item9, index9) in leadTypeList" :value="item9" :key="index9"></el-option>
                  </el-select>
                </div>
              </a-form-item>
              
              <!-- Status -->
              <!-- <a-form-item label="" class="items">
                <div class="text">Status</div>
                <div class="leadinfo-type">
                  <el-select placeholder="select" v-model="newLeadsForm.leadDtlStatus">
                    <el-option v-for="(item10, index10) in leadStatusList" :value="item10" :key="index10"></el-option>
                  </el-select>
                </div>
              </a-form-item> -->
              
              <!-- source -->
              <a-form-item label="" class="items">
                <div class="text">Source</div>
                <a-input class="ipt" allowClear v-model="newLeadsForm.leadDtlSource"/>
              </a-form-item>

              <!-- Area 输入 -->
              <a-form-item label="" class="items">
                <div class="text">Area</div>
                <a-input class="ipt" allowClear v-model="newLeadsForm.leadDtlArea"/>
              </a-form-item>

              <!-- Timeframe  -->
              <a-form-item label="" class="items">
                <div class="text">Timeframe</div>
                <div class="leadinfo-type">
                  <el-select placeholder="select" v-model="newLeadsForm.leadDtlTimeframe">
                    <el-option v-for="(item11, index11) in leadTimeframeList" :value="item11" :key="index11"></el-option>
                  </el-select>
                </div>
              </a-form-item>

              <!-- Urgency  -->
              <a-form-item label="" class="items">
                <div class="text">Urgency</div>
                <div class="leadinfo-type">
                  <el-select placeholder="select" v-model="newLeadsForm.leadDtlUrgency">
                    <el-option v-for="(item12, index12) in leadUrgencyList" :value="item12" :key="index12"></el-option>
                  </el-select>
                </div>
              </a-form-item>

              <!-- Agent  -->
              <a-form-item label="" class="items">
                <div class="text">Agent</div>
                <div class="leadinfo-type">
                  <el-select placeholder="select" v-model="newLeadsForm.leadDtlAgent">
                    <el-option v-for="(item19, index19) in leadList" :label="item19.label" :value="item19.username" :key="index19"></el-option>
                  </el-select>
                </div>
              </a-form-item>

            </a-form>
          </a-col>
        </a-row>
        
        <!-- Secondary Contact -->
        <div class="botInfos" v-show="addSecondaryContact">
          <div class="showBoxes">
            <div class="box1 clearfix">
              <div class="item">
                <div class="tit">Name</div>
                <div class="xl">
                  <a-input class="ipt" allowClear v-model="newLeadsForm.leadScName"/>
                </div>
              </div>

              <div class="item">
                <div class="tit">Address</div>
                <div class="xl">
                  <a-input class="ipt" allowClear v-model="newLeadsForm.leadScAddress"/>
                </div>
              </div>

              <div class="item item3">
                <div class="tit">Phone</div>
                <div class="xl">
                  <a-input class="ipt" allowClear v-model="newLeadsForm.leadScPhone"/>
                </div>
              </div>

              <div class="item">
                <div class="tit">Email</div>
                <div class="xl">
                  <a-input class="ipt" allowClear v-model="newLeadsForm.leadScEmail"/>
                </div>
              </div>


              <div class="item moreIt clearfix">
                <div class="nbbox">
                  <div class="tit">City</div>
                  <div class="xl">
                    <a-input class="ipt" allowClear v-model="newLeadsForm.leadScCity"/>
                  </div>
                </div>

                <div class="nbbox">
                  <div class="tit">St</div>
                  <div class="xl">
                    <a-input class="ipt" allowClear v-model="newLeadsForm.leadScState"/>
                  </div>
                </div>

                <div class="nbbox">
                  <div class="tit">Zip</div>
                  <div class="xl">
                    <a-input class="ipt" allowClear v-model="newLeadsForm.leadScZip"/>
                  </div>
                </div>
            
              </div>

            </div>
          </div>
        </div>

      </div>
    </a-modal>


    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './user-add-or-update'
var url = 'http://192.168.1.150:8000/renren-fast/app/imgUpload'
const toolbarOptions = [
  ['bold', 'italic', 'underline'],  // 加粗，斜体，下划线，删除线 'strike'
  [{'color': []}, {'background': []}], // dropdown with defaults from theme
  // ['blockquote', 'code-block'], // 引用，代码块

  [{'header': 1}, {'header': 2}],  // 标题，键值对的形式；1、2表示字体大小
  [{'list': 'ordered'}, {'list': 'bullet'}],  // 列表
  [{'script': 'sub'}, {'script': 'super'}],  // 上下标
  [{'indent': '-1'}, {'indent': '+1'}],  // 缩进
  [{'align': []}],
  [{'direction': 'rtl'}],  // 文本方向

  [{'size': ['small', false, 'large', 'huge']}],  // 字体大小
  [{'header': [1, 2, 3, 4, 5, 6, false]}],  // 几级标题
  [{'font': []}],
  // ['link', 'image'],
  // ['clean']  // remove formatting button
]

export default {
  components: {
    AddOrUpdate
  },
  data () {
    return {
      dataForm: {
        'key': '',
        'agent': ''
      },
      leadList: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      navList: [
        {'title': 'Activity Today', 'active': 0, 'span': 5},
        {'title': 'New', 'active': 0, 'span': 4},
        {'title': 'Unassigned', 'active': 0, 'span': 5},
        {'title': 'All My Leads', 'active': 1, 'span': 5},
        {'title': 'My New Leads', 'active': 0, 'span': 5}
      ],
      firstCellStyle: {
        'font-size': '16px',
        'color': '#F3F6FD',
        'background': '#1890FF',
        'border-right': '1px solid #fff'
      },
      viewNavNum: 4,
      addAcFollvisible: false,
      typeList: [
        { 'title': 'Activity', 'icon': '', 'active': 1 },
        { 'title': 'Follow-up', 'icon': '', 'active': 0 }
      ],
      showType: 0,
      // Activity
      getActTypeList: [],
      activityForm: {
        'type': '',
        'time': '',
        'notes': ''
      },
      getFollowUserList: ['a', 'b', 'c'],
      followUpForm: {
        'user': '',
        'purpose': '',
        'title': '',
        'radio': 1,
        'ischeckbox': 0,
        'time': '',
        'notes': '',
        'repeatEndTime': '',
        "repeatEvery": '',
        "repeatDateUnit": ''
      },
      getFollowPurposeList: [],
      rememinderList: [],
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      userObj: {},

      // email
      emailTempvisible: false,
      sendEmailForm: {
        'to': '',
        'cc': '',
        'subject': '',
        'template': ''
      },
      emailTepList: [],
      // 富文本
      quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
      serverUrl: url,  // 这里写你要上传的图片服务器地址
      // header: {token: this.$cookie.get('token')},  // 有的图片服务器要求请求头需要有token之类的参数，写在这里
      detailContent: '', // 富文本内容
      editorOption: {  // 富文本编辑器配置
        placeholder: '',
        theme: 'snow',  // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions,  // 工具栏
            handlers: {
              'image': function (value) {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        },
        handlers: {
          'image': function (value) {
            if (value) {
              // document.querySelector('#quill-upload input').click()
              console.log('执行了image')
            } else {
              // this.quill.format('image', false)
            }
          }
        }
      },

      // 弹窗: +lead
      addNewLeadvisible: false,
      newLeadsForm: {
        'firstName': '',
        'lastName': '',
        'phone': '',
        'email': '',
        'leadAdtnAddress': '',
        'leadAdtnCity': '',
        'leadAdtnState': '',
        'leadAdtnZip': '',
        'leadAdtnNotes': '',
        'leadDtlType': '',
        'leadDtlStatus': '',
        'leadDtlSource': '',
        'leadDtlArea': '',
        'leadDtlTimeframe': '',
        'leadDtlUrgency': '',  //1
        'leadDtlAgent': '',
        'leadScName': '',
        'leadScAddress': '',
        'leadScPhone': '',
        'leadScEmail': '',
        'leadScCity': '',
        'leadScState': '',
        'leadScZip': ''
      },
      addSecondaryContact: false,
      // 用户相关
      leadTypeList: [],
      leadStatusList: [],
      leadTimeframeList: [],
      leadUrgencyList: [],

    }
  },
  filters:{
    convertSeparator: function (num) {
        // var str = num + "";
        // var reg = /-?/d+/d{3}/;
        // while (reg.test(str)) {
        //     str = str.replace(reg, "$1,$2");
        // }
        // return str;
    },
    fmtNum:  function (str) {
      // var str = typeof str == 'string' ? str : str + '';
      str=str+""
      if(str=='null')    return ''
      var newStr = "";
      var count = 0;
      // 当数字是整数
      if (str.indexOf(".") == -1) {
        for (var i = str.length - 1; i >= 0; i--) {
          if (count % 3 == 0 && count != 0) {
            newStr = str.charAt(i) + "," + newStr;
          } else {
            newStr = str.charAt(i) + newStr;
          }
          count++;
        }
        str = newStr; //自动补小数点后两位 + ".00"
        return '$'+str;
      }
      // 当数字带有小数
      else {
        for (var i = str.indexOf(".") - 1; i >= 0; i--) {
          if (count % 3 == 0 && count != 0) {
            newStr = str.charAt(i) + "," + newStr;
          } else {
            newStr = str.charAt(i) + newStr; //逐个字符相接起来
          }
          count++;
        }
        str = newStr + (str + "00").substr((str + "00").indexOf("."), 3);
        return '$'+str;
      }
    },
  },
  activated () {
    this.viewNavNum = 4
    this.selectActType = ''
    this.getAgentList()
    this.getEmailTemplate()
    this.getEveryTypes()
    this.getDataList()
  },
  methods: {
    setState (row, column) {
      return row.status === 1 ? 'Available' : 'Disable'
    },

    // 获取email模板
    getEmailTemplate () {

      this.$http({
        url: this.$http.adornUrl('/crm/activity/getEmailTemplate'),
        method: 'post',
        data: this.$http.adornData({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 获取 email模板 成功 -----', data)
          this.emailTepList = data.emailTpls

        } else {
          console.log('----- 获取 email模板 失败 -----', data)
          this.emailTepList = []
          this.$message.error(data.msg)
        }

      })

    },

    getAgentList () {
      // 4 获取代理列表
      this.$http({
        url: this.$http.adornUrl('/crm/broker/getAgents'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('-----  获取代理列表成功 -----', data)
          this.leadList = data.brokerAgents

        } else {
          console.log('-----  获取代理列表失败 -----', data)
          this.leadList = []
          this.$message.error(data.msg)
        }
      })
    },
    
    // 获取各种type
    getEveryTypes () {
      this.$http({
        url: this.$http.adornUrl('/crm/getOptions'),
        method: 'post',
        data: this.$http.adornData({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('-----  获取各种type成功 -----', data)
          this.leadTypeList = data.options.lead_type
          this.leadStatusList = data.options.lead_status
          this.leadTimeframeList = data.options.lead_timeframe
          this.leadUrgencyList = data.options.lead_urgency

        } else {
          console.log('-----  获取各种type失败 -----', data)
        }
      })
    },

    // 获取数据列表
    getDataList () {
      var navList = this.navList
      if(navList && navList.length) {
        navList.map((item, index, arr) => {
          if(item.active == 1) {
            this.viewNavNum = index+1
          }
        })
      }

      // 2 获取各种type
      this.$http({
        url: this.$http.adornUrl('/crm/getOptions'),
        method: 'post',
        data: this.$http.adornData({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('-----  获取各种type成功 -----', data)
          this.getActTypeList = data.options.activity_type
          this.getFollowPurposeList = data.options.followup_purpose

        } else {
          console.log('-----  获取各种type失败 -----', data)
        }
      })
      
      // 3 获取列表
      this.dataListLoading = true
      var params1 = {
        "filter": this.viewNavNum,  // 1.今日活动的客户 2.新客户 3.未匹配经纪人的客户 4.我的客户 5.我的新客户
        "key": this.dataForm.key,
        "limit": this.pageSize,
        "page": this.pageIndex
      }
      console.log('----- 获取用户列表传参 -----', params1)
      
      this.$http({
        url: this.$http.adornUrl('/crm/leads/getLeads'),
        method: 'post',
        data: this.$http.adornData(params1)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 获取用户列表成功 -----', data.page.list)
          var getDataList = data.page.list

          var leadLists = this.leadList

          // 处理时间
          if(getDataList && getDataList.length) {
            getDataList.map((item, index, arr) => {
              item.useStartDateDays = item.useStartDate ? this.getRemainderTime(item.useStartDate) : ''
              item.useActiveDateDays = item.useActiveDate ? this.getRemainderTime(item.useActiveDate) : ''
              item.agentList = leadLists
            })
          }

          this.dataList = getDataList
          this.totalPage = data.page.totalCount

  
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
      

    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    toSearchHandle () {
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle (id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
          return item.userId
        })
      var _this = this
      _this.$confirm({//这个confirm是antUI的
        title: `Are you sure [id=${ids.join(',')}] will be [${id ? 'deleted' : 'deleted batch'}] ?`,
        content: '',
        onOk() {
          console.log('----- 删除 -----');
          _this.$http({
            url: _this.$http.adornUrl('/memberhpr/user/delete'),
            method: 'post',
            data: _this.$http.adornData(ids, false)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              _this.$message.success('success', 1, function () {
                _this.getDataList()
              })
            } else {
              _this.$message.error(data.msg, 1)
            }
          })
        },
        onCancel() {
          console.log('----- 取消删除 -----');
        }
      })
    },
    // 发布/取消发布
    releaseHandle (row) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/memberhpr/user/userStus/' + row.userId),
        method: 'get',
        params: this.$http.adornParams({
          avalable: !row.status ? '1' : '0'
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('-----成功-----', data)
          this.getDataList()
        }
        this.dataListLoading = false
      })
    },
    tabrowDbClick (row, event) {
      sessionStorage.setItem('user', JSON.stringify(row))
      sessionStorage.setItem('actType', 0)
      sessionStorage.setItem('userId', row.userId)
      this.$router.push({name: 'Lead Manager', params: {userId: row.userId}})
    },
    changeNav (i) {
      var ind = +i
      var navList = this.navList
      for (var i = 0; i < navList.length; i++) {
        navList[i].active = 0
        if (i === ind) {
          navList[i].active = 1
          this.viewNavNum = i + 1
        }
      }
      this.navList = navList
      this.getDataList()
    },
    tableRowStyle({row,rowIndex}){
      if(rowIndex %2 === 1) {
        return 'background: #F5F8FF;'
      } else {
        return 'background: #EFFAFF;'
      }
    },
    cellStyle:function (row, column, rowIndex, columnIndex) {
      if(row.column.label === 'Name'){
        return 'padding: 13px 12px 18px 12px; border: 0; border: 1px solid #fff;'

      } else if(row.column.label === 'Urgency'){
        return 'padding: 21px 4px 12px; border: 0; border: 1px solid #fff;'

      } else if(row.column.label === 'Start Date' || row.column.label === 'Active Date'){
        return 'font-size: 14px; color: #7B859D; border: 0; border: 1px solid #fff;'

      } else if(row.column.label === 'Status'){
        return 'padding: 0; font-size: 14px; color: #384157; border: 0; border: 1px solid #fff;'

      } else if(row.column.label === 'Agent&Lender'){
        return 'padding: 0; font-size: 14px; color: #384157; border: 0; border: 1px solid #fff;'
        
      } else{
        return 'padding: 0; font-size: 16px; color: #384157; border: 0; border: 1px solid #fff;'
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return [1, 5];
      } else if (columnIndex === 2) {
        return [0, 0];
      } else if (columnIndex === 3) {
        return [0, 0];
      } else if (columnIndex === 4) {
        return [0, 0];
      } else if (columnIndex === 5) {
        return [0, 0];
      }
    },
    getRemainderTime (startTime) {
      var s1 = new Date(startTime.replace(/-/g, "/"))
      var s2 = new Date()
      var runTime = parseInt((s2.getTime() - s1.getTime()) / 1000)
      var year = Math.floor(runTime / 86400 / 365)
      runTime = runTime % (86400 * 365)
      var month = Math.floor(runTime / 86400 / 30)
      runTime = runTime % (86400 * 30)
      var day = Math.floor(runTime / 86400)
      runTime = runTime % 86400
      var hour = Math.floor(runTime / 3600)
      runTime = runTime % 3600
      var minute = Math.floor(runTime / 60)
      runTime = runTime % 60
      var second = runTime
      return day
    },
    // 点击--activity
    showAddModal(row) {
      console.log('----- 该用户 -----', row.userId)
      this.userObj.leadId = row.userId
      this.addAcFollvisible = true
    },
    handleAddOk(e) {
      console.log(e)
      this.addAcFollvisible = false
    },
    changeTypes (i) {
      var ind = +i
      var typeList = this.typeList
      for (var i = 0; i < typeList.length; i++) {
        typeList[i].active = 0
        if (i === ind) {
          typeList[i].active = 1
        }
      }
      this.typeList = typeList
      this.showType = ind
    },
    // activity
    selectAcTime (date, dateString) {
      this.activityForm.time = dateString
    },
    onRedioChange(e) {
      console.log('radio checked', e.target.value)
      this.followUpForm.radio = e.target.value
      if(this.followUpForm.radio == 1) {
        this.followUpForm.repeatEndTime = ''
        this.followUpForm.repeatEvery = ''
        this.followUpForm.repeatDateUnit = ''
      }
    },
    onCheckboxChange(e) {
      this.followUpForm.ischeckbox = e.target.checked ? 1 : 0
      console.log('checked', this.followUpForm.ischeckbox)
    },
    // follow-up
    selectFollowTime (date, dateString) {
      this.followUpForm.time = dateString
    },
    selectEndRepeatTime (date, dateString) {
      this.followUpForm.repeatEndTime = dateString
    },
    // 添加 activity
    addActivityHandle (row) {

      // 校验
      var activityForm = this.activityForm
      if(!activityForm.type) {
        this.$message.error('Please select Type')
        return
      }

      if(!activityForm.time) {
        this.$message.error('Please select Time')
        return
      }

      if(!activityForm.notes) {
        this.$message.error('Please enter Notes')
        return
      }

      var params3 = {
        "leadId": this.userObj.leadId,
        "actType": this.activityForm.type,
        "actTime": this.activityForm.time,
        "actNotes": this.activityForm.notes
      }
      console.log('----- 添加活动备注传参 -----', params3)

      this.$http({
        url: this.$http.adornUrl('/crm/activity/saveActivity'),
        method: 'post',
        data: this.$http.adornData(params3)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 添加活动备注成功 -----', data)
          // 提示
          this.$message.success('Save successfully.', 3, function () {})
          this.getDataList()

          // 刷新
        } else {
          console.log('----- 添加活动备注失败 -----', data)
          this.$message.error(data.msg)
        }
      })
    },
    // 点击--Add Reminder
    addReminderHandle () {
      //  1.添加一个数组元素
      var rememinderList = this.rememinderList
      if(rememinderList.length < 4) {
        var newObj = {'val': '', 'timeunit': ''}
        rememinderList.push(newObj)
        this.rememinderList = rememinderList
      } else {
        this.$message.warning('Up to four can be added.')
      }
     
    },
    deleteReminderHandle(i) {
      var i = i
      var rememinderList = this.rememinderList
      var newArr = []
      if(rememinderList && rememinderList.length) {
        rememinderList.map((item, index, arr) => {
          if(index != i) {
            newArr.push(item)
          }
        })
      }
      this.rememinderList = newArr

    },
    // 添加 follow-up
    addFollowUp () {
      // 校验
      var followUpForm = this.followUpForm

      // if(!followUpForm.user) {
      //   this.$message.error('Please select User')
      //   return
      // }

      if(!followUpForm.purpose) {
        this.$message.error('Please select Purpose')
        return
      }

      if(!followUpForm.title) {
        this.$message.error('Please enter Title')
        return
      }
       
      // 期间重复
      if(followUpForm.radio == 2) {
        if(!followUpForm.repeatEvery) {
          this.$message.error('Please enter Repeat Every')
          return
        }

        if(!followUpForm.repeatDateUnit) {
          this.$message.error('Please select repeatDateUnit')
          return
        }

        if(!followUpForm.repeatEndTime) {
          this.$message.error('Please select Ending')
          return
        }
      }

      if(!followUpForm.time) {
        this.$message.error('Please select Time')
        return
      }

      if(!followUpForm.notes) {
        this.$message.error('Please enter notes')
        return
      }

      // 处理
      var afterRememinderList = this.rememinderList
      var timeBeforeList = []
      if(afterRememinderList && afterRememinderList.length) {
        afterRememinderList.map((item, index, arr) => {
          var timeunit = (item.timeunit == 'minutes' ? 1 : (item.timeunit == 'hours' ? 2 : (item.timeunit == 'days' ? 3 : (item.timeunit == 'weeks' ? 4 : (item.timeunit == 'months' ? 5 : 6 )))))
          var str = item.val + '-' + timeunit
          timeBeforeList.push(str)
        })
      }

      var params4 = {
        "actNotes": this.followUpForm.notes, // 备注说明
        "actTime": this.followUpForm.time, // 行动时间
        "agentId": 0, // 多代理时选择 this.followUpForm.user
        "happenType": +this.followUpForm.radio, // 发生类型，1-指定时间；2-期间重复
        "allDayEvent": +this.followUpForm.ischeckbox, // 全天事件，1-是 0-默认，不是
        "leadId": this.userObj.leadId,
        "purpose": this.followUpForm.purpose, // 意图目的
        "reminders": this.rememinderList.length, // 是否提醒，0-默认，无邮件提醒；1-4 最多4个邮件提醒
        "timeBefores": timeBeforeList,
        "repeatEvery": this.followUpForm.repeatEvery, // 重复间隔
        "repeatDateUnit": this.followUpForm.repeatDateUnit ?  (this.followUpForm.repeatDateUnit == 'Days' ? 3 : (this.followUpForm.repeatDateUnit == 'Weeks' ? 4 : (this.followUpForm.repeatDateUnit == 'Months' ? 5 : 6 ))) : '', // 时间单位，1-minutes,2-hours,3-days,4-weeks,5-months,6-years
        "repeatEndTime": this.followUpForm.repeatEndTime,
        "title": this.followUpForm.title, // 标题

      }
      console.log('----- 添加follow-up传参 -----', params4)

      this.$http({
        url: this.$http.adornUrl('/crm/activity/saveFollowup'),
        method: 'post',
        data: this.$http.adornData(params4)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 添加follow-up成功 -----', data)
          // 提示
          this.$message.success('Save successfully.', 3, function () {})
          this.getFollowUpList()

          // 刷新
        } else {
          console.log('----- 添加follow-up失败 -----', data)
          this.$message.error(data.msg)
        }
      })
    },
    // 改变代理
    changeAgentHandle (row, agent) {

      // 处理
      var agentList = row.agentList
      var selectedAgent = agent
      var seleAgentId = ''
      if(agentList && agentList.length) {
        agentList.map((item, index, arr) => {
          if(item.username == selectedAgent) {
            seleAgentId = item.user_id
          }
        })
      }

      var params8 = {
        'leadId': row.userId,
        'brokerId': seleAgentId,
        'leadDtlAgent': agent,
      }
      console.log('----- 改变代理 传参 -----', params8)
      this.$http({
        url: this.$http.adornUrl('/crm/leads/updateLead4Agent'),
        method: 'post',
        data: this.$http.adornData(params8)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 改变代理 成功 -----', data)
          this.getDataList()

        } else {
          console.log('----- 改变代理 失败 -----', data)
          this.$message.error(data.msg)
        }

      })
    },
    // 弹窗--email
    showEmailTempModal(row) {
      this.userObj.leadId = row.userId
      this.sendEmailForm.to = row.email
      // 清空
      this.sendEmailForm.cc = ''
      this.sendEmailForm.subject = ''
      this.sendEmailForm.template = ''
      this.detailContent = ''

      this.emailTempvisible = true
    },
    // 点击--send
    handleEmailTempOk(e) {

      // 请求
      var params13 = {
        'leadId':  this.userObj.leadId,
        'mcontent': this.detailContent,
        'mcc': this.sendEmailForm.cc,
        'msubject': this.sendEmailForm.subject,
        'mto': this.sendEmailForm.to
      }
      console.log('----- 发送 email 传参 -----', params13)

      this.$http({
        url: this.$http.adornUrl('/crm/activity/sendCRMEmail'),
        method: 'post',
        data: this.$http.adornData(params13)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 发送 email 成功 -----', data)
          this.$message.success('Send successfully.', 2, function () {})
          // this.getEmailTemplate()

        } else {
          console.log('----- 发送 email 失败 -----', data)
          this.$message.error(data.msg)
        }

      })

      this.emailTempvisible = false
    },

    // 富文本
    getContent () {
      // this.dialogVisible = true
      // var quill = new Quill('#editor', {
      //   theme: 'snow'
      // })
      // var delta = Quill.getContents()
      // console.log(delta)
    },
    // 上传图片前
    beforeUpload (res, file) {
      // 显示loading动画
      this.quillUpdateImg = true
    },
    // 上传图片成功
    uploadSuccess (res, file) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill
      // console.log(res)
      // 如果上传成功
      if (res.code === 200) {
        console.log('执行')
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片  res.info为服务器返回的图片地址
        quill.insertEmbed(length, 'image', res.url)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        this.$message.error('图片插入失败')
      }
      // loading动画消失
      this.quillUpdateImg = false
    },
    // 上传图片失败
    uploadError (res, file) {
      // loading动画消失
      this.quillUpdateImg = false
      this.$message.error('图片插入失败')
    },
    onEditorBlur () { // 失去焦点事件
    },
    onEditorFocus () { // 获得焦点事件
    },
    onEditorChange () { // 内容改变事件
      // console.log(111111111, this.detailContent)
    },
    onEditorReady () {
    },

    // 选择模板时
    showSelectTemplate (m) {
      var sm = this.sendEmailForm.template
      var emailTepList = this.emailTepList
      if(emailTepList && emailTepList.length) {
        emailTepList.map((item, index, arr) => {
          if(item.etitle == sm) {
            this.sendEmailForm.subject = item.etitle
            this.detailContent = item.econtent
          }
        })
      }
    },

    // +lead
    addNEwHandle () {
      this.addNewLeadvisible = true
    },
    
    // 确定
    handleNewLeadOk(e) {
      // 处理
      var selectAgent = this.newLeadsForm.leadDtlAgent
      var borid = ''
      var leadList = this.leadList
      if(leadList && leadList.length) {
        leadList.map((item, index, arr) => {
          if(item.username == selectAgent) {
            borid = item.user_id
          }
        })
      }

      // 请求
      var params80 = {
        'brokerId': borid,
        'email': this.newLeadsForm.email,
        'leadAdtnAddress': this.newLeadsForm.leadAdtnAddress,
        'leadAdtnCity': this.newLeadsForm.leadAdtnCity,
        'leadAdtnNotes': this.newLeadsForm.leadAdtnNotes,
        'leadAdtnState': this.newLeadsForm.leadAdtnState,
        'leadAdtnZip': this.newLeadsForm.leadAdtnZip,
        'leadCttFirstname': this.newLeadsForm.firstName,
        'leadCttLastname': this.newLeadsForm.lastName,
        'leadDtlAgent': this.newLeadsForm.leadDtlAgent,
        'leadDtlArea': this.newLeadsForm.leadDtlArea,
        'leadDtlSource': this.newLeadsForm.leadDtlSource,
        'leadDtlTimeframe': this.newLeadsForm.leadDtlTimeframe,
        'leadDtlType': this.newLeadsForm.leadDtlType,
        'leadScAddress': this.newLeadsForm.leadScAddress,
        'leadScCity': this.newLeadsForm.leadScCity,
        'leadScEmail': this.newLeadsForm.leadScEmail,
        'leadScName': this.newLeadsForm.leadScName,
        'leadScPhone': this.newLeadsForm.leadScPhone,
        'leadScState': this.newLeadsForm.leadScState,
        'leadScZip': this.newLeadsForm.leadScZip,
        'phone': this.newLeadsForm.phone
      }
      console.log('----- 创建lead传参 -----', params80)

      this.$http({
        url: this.$http.adornUrl('/crm/leads/createLead'),
        method: 'post',
        data: this.$http.adornData(params80)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 创建lead 成功 -----', data)
          // 刷新列表
          this.$message.success('success', 1, function () {
            this.getDataList()
          })

        } else {
          console.log('----- 创建lead 失败 -----', data)
          this.$message.error(data.msg)
     
        }

      })

      this.addNewLeadvisible = false
    },

    // 点击 + Secondary Contactc
    showSecondContactHandle () {
      this.addSecondaryContact = !this.addSecondaryContact
    },


  }
}
</script>

<style lang="less" scoped>
  .all {
    .location {
    }
    
    .topbox {
      z-index: 999999999999999999999;
      margin-bottom: 10px;
      .navTab {
        padding: 10px 0;
        .lnv {
          width: 880px;
          .item {
            width: 160px;
            padding-left: 0px !important;
            padding-right: 0px !important;
            margin-right: 10px;
            &:last-child {
              margin-right: 0;
            }
            .ite {
              width: 160px;
              height: 36px;
              line-height: 36px;
              background:rgba(233,239,255,1);
              text-align: center;
              font-size: 16px;
              color: rgba(123,133,157,1);
              cursor: pointer;
              word-break: break-all;
              &:hover,
              &.active {
                background: rgba(24,144,255,1);
                border-radius: 2px;
                font-size: 16px;
                font-weight: bold;
                color: rgba(255,255,255,1);
              }
            }
          }
        }
        .rnew {
          width: 120px;
          float: right;
          .box {
            width: 120px;
            height: 36px;
            line-height: 30px;
            text-align: center;
            background:rgba(255,255,255,1);
            border: 2px solid rgba(24,144,255,1);
            border-radius: 2px;
            cursor: pointer;
            float: right;
            font-size: 16px;
            font-weight: bold;
            color:rgba(24,144,255,1);
            .pic {
              width: 16px;
              height: 16px;
              display: inline-block;
              background :rgba(24,144,255,1);
              margin-right: 4px;
              vertical-align: middle;
            }
          }
          
        }
      }
    }

    .tnvBox {
      padding: 0;
      .item {
        padding: 0;
        width: 20%;
        height: 71px;
        line-height: 61px;
        float: left;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        font-size:16px;
        font-weight:400;
        color:rgba(56,65,87,1);
        &:last-child {
          border-right: 0;
        }
      }
    }
    .botBox {
      padding: 25px 20px;
      height: 71px;
      text-align: left;
      font-size:16px;
      font-weight:400;
      color:rgba(56,65,87,1);
      .p {
        margin: 0;
      }
    }

    .el-pagination {
      padding: 5px;
    }

    /deep/ .el-pagination__editor.el-input .el-input__inner {
      height: 30px;
      border: 0;
    }
    
    .ssboxes {
      .rsearch {
        float: right;
        .sript {
          width: 364px;
          height: 18px!important;
          line-height: 18px!important;
          padding: 0;
          background:rgba(255,255,255,1);
          border-radius: 2px;
          border: 5px solid #E9EFFF;
          /deep/ .el-input__inner {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            font-weight: 700;
            color: #384157;
          }
          /deep/ .el-input-group__append {
            width: 40px;
            height: 30px;
          }
          /deep/ .el-button--medium {
            width: 40px;
            height: 30px;
            padding: 0;
            background:rgba(24,144,255,1)!important;
            border-radius:2px;
            display: block;
            color: #fff!important;
          }
          [class^=el-icon-] {
            width: 15px;
            height:15px;
            background:#fff;
            border-radius: 50%;
          }
        }
      }

      .senior {
        width: 157px;
        background: #E9EFFF;
        padding: 5px 3px 5px 10px;
        float: right;
        cursor: pointer;
        .inbx {
          width: 140px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background:rgba(255,255,255,1);
          border-radius:2px;
          font-size:14px;
          color:rgba(24,144,255,1);
        }
      
      }
    }
  

    // table
    .el-table tr {
      background: rgba(239,250,255,1);
    }
    .nmcol-nm {
      font-size: 14px;
      font-weight: bold;
      text-decoration: underline;
      color: rgba(24,144,255,1);
      margin-bottom: 5px;
    }
    .nmcol-mobile {
      height: 21px;
      font-size: 14px;
      color: rgba(56,65,87,1);
    }
    .nmcol-time {
      font-size: 14px;
      color:rgba(123,133,157,1);
      margin-bottom: 2px;
    }
    .nmcol-email {
      font-size: 14px;
      font-weight: bold;
      text-decoration: underline;
      color: rgba(24,144,255,1);
    }
    .tobax {
      padding: 0 10px;
      .item {
        width: 120px; // 80px
        height:30px;
        line-height: 30px;
        text-align: center;
        background:rgba(54,207,201,1);
        border-radius:2px;
        float: left;
        margin: 0 10px 10px 0;
        font-size:14px;
        font-weight:bold;
        color:rgba(255,255,255,1);
        &:nth-child(2n) {
          margin-right: 0;
        }
        &.call {
          background:rgba(89,126,247,1);
        }
      }
      .addActivity {
        width: 120px;
        height:30px;
        line-height: 26px;
        text-align: center;
        background:rgba(89,126,247,1);
        border-radius:2px;
        font-size:14px;
        font-weight:bold;
        color:rgba(255,255,255,1);
        margin-top: 10px;
        .photo {
          width: 17px;
          height: 17px;
          // border: 1px solid rgba(255,255,255,1);
          // border-radius: 8px;
          // background: #123567;
          margin-right: 10px;
          vertical-align: middle;
        }
      }
    }

    /deep/ .cell {
      padding-left: 0;
      padding-right: 0;
    }

    .el-table--medium td {
      padding: 0;
    }

  }

  // 弹窗: activity
  .theladdInf {
    width: 432px;
    height: 570px;
    background:rgba(243,246,253,1);
    border-radius: 2px;
    overflow-y: auto;
    padding: 0!important;
    margin-top: 20px;

    .ite {
      .m {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-right: 1px solid #fff;
        background: #E9ECF3;
        cursor: pointer;
        z-index: 99;
        &:last-child {
          border: 0;
        }
        &:hover,
        &.active {
          background: rgba(24,144,255,1);
          border-radius: 2px 0px 0px 0px;
          font-size: 14px;
          color:rgba(255,255,255,1);
        }
        .pic {
          width: 18px;
          height: 18px;
          vertical-align: middle;
          margin-right: 3px;
        }
      }
      // Activity
      .activities {
        height: 530px;
        padding: 50px 30px;
        background: #F3F6FD;
        .typeed {
          height: 32px;
          line-height: 32px;
          margin-bottom: 30px;
          .txt {
            width: 60px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
          // 下拉
          .rbox {
            width: calc(100% - 60px);
            .dropbox {
              width: 100%;
              height: 30px;
              background: rgba(255,255,255,1);
              border-radius: 2px;
              outline: 0;
              border: 0;
              text-align: left;
            }
            .showTxt {
              font-size: 14px;
              font-weight: bold;
              color: rgba(56,65,87,1);
              padding: 0 7px;
              position: relative;
              .pic {
                width: 30px;
                height: 30px;
                background: rgba(233,236,243,1);
                border-radius: 0px 2px 2px 0px;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 999;
                .ico {
                  width: 12px;
                  height: 6px;
                  position: absolute;
                  top: 12px;
                  left: 9px;
                  z-index: 99;
                }
              }
            }
          }
        }
        .tmdate {
          margin-bottom: 30px;
          .txt {
            width: 60px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
          // 时间
          .rbox {
            width: calc(100% - 60px);
            .tmpicker {
              width: 100%!important;
              height: 30px;
              background: rgba(255,255,255,1);
              border-radius: 2px;
              outline: 0;
              border: 0;
              text-align: left;
              /deep/ .ant-input {
                border: 0;
                font-size: 14px;
                font-weight: bold;
                color: rgba(56,65,87,1);
                padding: 4px 9px;
              }
            }
          }
        }
        .notes {
          margin-bottom: 30px;
          .txt {
            width: 60px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
          .rbox {
            width: calc(100% - 60px);
            .noteTextArea {
              width: 100%;
              height: 240px;
              padding: 4px 9px;
              background:rgba(255,255,255,1);
              border-radius: 2px;
              outline: 0;
              border: 0;
              font-size: 14px;
              font-weight: bold;
              color: rgba(56,65,87,1);
              resize: none;
            }
          }
        }
        .save {
          width: 120px;
          height: 30px;
          line-height: 30px;
          background:rgba(24,144,255,1);
          border-radius: 2px;
          text-align: center;
          cursor: pointer;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,1);
          float: right;
        }
      }
      // Follow-up
      .follow {
        height: 530px;
        padding: 50px 30px;
        background: #F3F6FD;
        .user,
        .purpose {
          height: 32px;
          line-height: 32px;
          margin-bottom: 30px;
          .txt {
            width: 60px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
          // 下拉
          .rbox {
            width: calc(100% - 60px);
            .dropbox {
              width: 100%;
              height: 30px;
              background: rgba(255,255,255,1);
              border-radius: 2px;
              outline: 0;
              border: 0;
              text-align: left;
            }
            .showTxt {
              font-size: 14px;
              font-weight: bold;
              color: rgba(56,65,87,1);
              padding: 0 7px;
              position: relative;
              .pic {
                width: 30px;
                height: 30px;
                background: rgba(233,236,243,1);
                border-radius: 0px 2px 2px 0px;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 999;
                .ico {
                  width: 12px;
                  height: 6px;
                  position: absolute;
                  top: 12px;
                  left: 9px;
                  z-index: 99;
                }
              }
            }
          }
        }

        .followtitle {
          height: 32px;
          line-height: 32px;
          margin-bottom: 30px;
          .txt {
            width: 60px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
          // 输入框
          .rbox {
            width: calc(100% - 60px);
            font-size:14px;
            font-weight:bold;
            color:rgba(56,65,87,1);
          }
        }

        .interval {
          margin-bottom: 20px;
          .txt {
            width: 60px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
          // 单选
          .rbox {
            width: calc(100% - 60px);
            font-size:14px;
            font-weight:bold;
            color:rgba(56,65,87,1);
            .ant-radio-wrapper {
              font-size:14px;
              font-weight:bold;
              color:rgba(56,65,87,1);
            }
          }
        }

        .isAllday {
          margin-bottom: 30px;
          font-size: 14px;
          color:rgba(56,65,87,1);
          .ant-checkbox-wrapper {
            font-weight:bold;
            color:rgba(56,65,87,1);
          }
        }

        .tmdate {
          margin-bottom: 30px;
          .txt {
            width: 60px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
          // 时间
          .rbox {
            width: calc(100% - 60px);
            .tmpicker {
              width: 100%!important;
              height: 30px;
              background: rgba(255,255,255,1);
              border-radius: 2px;
              outline: 0;
              border: 0;
              text-align: left;
              /deep/ .ant-input {
                border: 0;
                font-size: 14px;
                font-weight: bold;
                color: rgba(56,65,87,1);
                padding: 4px 9px;
              }
            }
          }
        }

        // 重复提醒
        .repeatTotal {
          .srday {
            margin-bottom: 30px;
            .txt {
              width: 110px;
              height: 32px;
              line-height: 32px;
              font-size: 14px;
              color: rgba(56,65,87,1);
            }
            // 时间
            .rbox {
              width: calc(100% - 110px);
              .bto {
                .lb {
                  width: 46%;
                  float: left;
                  margin-right: 10px;
                  margin-bottom: 10px;
                  .ipt {
                    width: 100%;
                    background:rgba(255,255,255,1);
                    border-radius:2px;
                    outline: 0;
                    border: 0;
                  }
                }
                .sel {
                  width: 48.5%;
                  float: left;
                }
              }
            }
          }
          // end
          .tmdate {
            margin-bottom: 30px;
            .txt {
              width: 60px;
              height: 32px;
              line-height: 32px;
              font-size: 14px;
              color: rgba(56,65,87,1);
            }
            // 时间
            .rbox {
              width: calc(100% - 60px);
              .tmpicker {
                width: 100%!important;
                height: 30px;
                background: rgba(255,255,255,1);
                border-radius: 2px;
                outline: 0;
                border: 0;
                text-align: left;
                /deep/ .ant-input {
                  border: 0;
                  font-size: 14px;
                  font-weight: bold;
                  color: rgba(56,65,87,1);
                  padding: 4px 9px;
                }
              }
            }
          }
        }

        .notes {
          margin-bottom: 20px;
          .txt {
            width: 60px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
          .rbox {
            width: calc(100% - 60px);
            .noteTextArea {
              width: 100%;
              height: 240px;
              padding: 4px 9px;
              background:rgba(255,255,255,1);
              border-radius: 2px;
              outline: 0;
              border: 0;
              font-size: 14px;
              font-weight: bold;
              color: rgba(56,65,87,1);
              resize: none;
            }
          }
        }
        .reminders {
          height: 32px;
          line-height: 32px;
          margin-bottom: 20px;
          .txt {
            width: 100px;
            font-size: 14px;
            color: rgba(56,65,87,1);
          }
          .rbox {
            width: calc(100% - 100px);
            font-size: 14px;
            font-weight: bold;
            color: #1890FF;
            cursor: pointer;
          }
        }
        // 提醒
        .tixBox {
          margin-bottom: 30px;
          padding: 0px 0 0 0;
          .addbox {
            margin-bottom: 20px;
            .text {
              height: 32px;
              font-size:12px;
              font-weight:bold;
              color:rgba(24,144,255,1);
            }
            .itebox {
              position: relative;
              .lb {
                width: 100px;
                float: left;
                margin-right: 10px;
                .ipt {
                  width: 100px;
                  background:rgba(255,255,255,1);
                  border-radius:2px;
                  outline: 0;
                  border: 0;
                }
              }
              .sel {
                width: 100px;
                float: left;
              }
              .deletes {
                width: 30px;
                height: 30px;
                text-align: center;
                background: #fff;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 999;
                cursor: pointer;
                padding-top: 4px;
                .pho {
                  width: 18px;
                  height: 18px;
                }
              }
            }
          }
        }
        .save {
          width: 120px;
          height: 30px;
          line-height: 30px;
          margin-bottom: 50px;
          background:rgba(24,144,255,1);
          border-radius: 2px;
          text-align: center;
          cursor: pointer;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,1);
          float: right;
        }
      }
    }

  }

  // 弹窗: email
  .emailModal {
    .tinfos {
    .shitem {
        margin-bottom: 30px;
        .ltxt {
          display: inline-block;
          width: 60px;
          font-size:14px;
          color:rgba(56,65,87,1);
        }
        .rshow {
          display: inline-block;
          font-size: 14px;
          font-weight: bold;
          color: rgba(56,65,87,1);
          .p {
            width: 400px;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            background:#F3F6FD;
            border-radius:2px;
            border: 0;
          }
          .ant-input {
            width: 400px;
            height: 30px;
            background:#F3F6FD;
            border-radius:2px;
            border: 0;
            // border: 1px solid #1890FF;
          }
          .el-select .el-input__inner {
            width: 400px;
            height: 30px;
            background:#F3F6FD;
            border-radius:2px;
            border: 0;
          }

        }
    }
    }

    .dbody {
      margin-bottom: 30px;
      .title {
        font-size:14px;
        color:rgba(56,65,87,1);
        margin-bottom: 10px;
      }
      .conbox {
        height: 310px;
      }
    }
  }

  // 弹窗: +lead
  .laedsdrawBox {
    width: 100%;
    // height: 600px;
    // overflow-y: auto;
    margin: 0 auto;
    padding: 0px 0 0 30px;
    .topinfos {
      margin-bottom: 30px;
      // 左
      .lbaseInfo {
        width: 320px;
        margin-right: 60px;
        .titles {
          font-size: 18px;
          color: rgba(56,65,87,1);
        }

        .formBox {
          width: 320px;
          .items {
            width: 320px;
            margin-bottom: 15px;
            .text {
              height: 32px;
              padding: 0 10px;
              font-size:12px;
              font-weight:bold;
              color:rgba(24,144,255,1);
            }
            .ipt {
              width: 320px;
            }
            &.tm {
              margin-bottom: 48px;
            }
          }

          /deep/ .ant-input {
            width: 320px;
            height: 40px;
            line-height: 40px;
            outline: 0!important;
            border: 0!important;
            background:rgba(243,246,253,1);
            border-radius:2px;
            font-size: 16px;
            font-weight: bold;
            color: rgba(56,65,87,1);
          }

          // logo
          .logos {
            width: 320px;
            margin-top: 50px;
            margin-bottom: 47px;
            .inx {
              float: right;
              .photo {
                width: 40px;
                height: 40px;
                margin-right: 20px;
                &:last-child {
                  margin-right: 0;
                }
              }
            }
          }

          .addSC {
            width: 320px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background:rgba(54,207,201,1);
            border-radius:2px;
            font-size: 16px;
            font-weight: bold;
            color: rgba(255,255,255,1);
            cursor: pointer;
            .pic {
              width: 17px;
              height: 17px;
              // border: 1px solid rgba(255,255,255,1);
              // border-radius: 8px;
              margin-right: 8px;
            }
          }
        }
      }

      // 中 Additional Info
      .middleInfo {
        width: 320px;
        margin-right: 60px;
        .titles {
          font-size: 18px;
          color: rgba(56,65,87,1);
        }
        .formBox {
          .items {
            width: 320px;
            margin-bottom: 15px;
            .text {
              height: 32px;
              padding: 0 10px;
              font-size:12px;
              font-weight:bold;
              color:rgba(24,144,255,1);
            }
            .ipt {
              width: 320px;
            }
            &.citys {
              margin-bottom: 15px;
              .inrow {
                width: 320px;
                .theone {
                  width: 100px;
                  margin-right: 10px;
                  &:last-child {
                    margin-right: 0;
                  }
                  .text {
                    height: 32px;
                    padding: 0 10px;
                    font-size:12px;
                    font-weight:bold;
                    color:rgba(24,144,255,1);
                  }
                  .ipt {
                    width: 100px;
                    .ant-input {
                      width: 100px!important;
                    } 
                  }
                }
              }
            }
          }
          
          .detnotes {
            width: 320px;
            margin-bottom: 15px;
            .tit {
              height: 32px;
              padding: 0 10px;
              font-size:12px;
              font-weight:bold;
              color:rgba(24,144,255,1);
            }
            .xl {
              .noteTextArea {
                width: 100%;
                height: 303px;
                padding: 4px 9px;
                background: #F3F6FD;
                border-radius: 2px;
                outline: 0;
                border: 0;
                font-size: 14px;
                font-weight: bold;
                color: rgba(56,65,87,1);
                resize: none; 
              }
            }
          }
          

          /deep/ .ant-input {
            width: 320px;
            height: 40px;
            line-height: 40px;
            outline: 0!important;
            border: 0!important;
            background:rgba(243,246,253,1);
            border-radius:2px;
            font-size: 16px;
            font-weight: bold;
            color: rgba(56,65,87,1);
          }
        }
      }

      // 右
      .rigInfo {
        width: 200px;
        margin-right: 60px;
        .titles {
          font-size: 18px;
          color: rgba(56,65,87,1);
        }
        .formBox {
          .items {
            margin-bottom: 15px;
            .text {
              height: 32px;
              padding: 0 10px;
              font-size:12px;
              font-weight:bold;
              color:rgba(24,144,255,1);
            }
            .ipt {
              width: 200px;
            }

            .leadinfo-type {
              .el-select {
                width: 200px;
                .el-input__inner {
                  height: 40px;
                  line-height: 40px;
                  width: 200px;
                  background:rgba(243,246,253,1);
                  border-radius:2px;
                }
              }
            }
    
          }


          /deep/ .ant-input {
            width: 200px;
            height: 40px;
            line-height: 40px;
            outline: 0!important;
            border: 0!important;
            background:rgba(243,246,253,1);
            border-radius:2px;
            font-size: 16px;
            font-weight: bold;
            color: rgba(56,65,87,1);
          }
        }
      }

    }

    .botInfos {
      margin-bottom: 20px;
      // 显示
      .showBoxes {
        // Secondary Contact
        .box1 {
          width: 960px;
          height: 220px;
          padding: 25px 20px;
          background:rgba(243,246,253,1);
          .item {
            width: 280px;
            margin-right: 20px;
            margin-bottom: 27px;
            float: left;
        
            &:nth-child(3n) {
              margin-right: 0;
            }
            .tit {
              padding-left: 10px;
              font-size:12px;
              font-weight:bold;
              color:rgba(24,144,255,1);
              margin-bottom: 3px;
            }
            .xl {
              .int {
              }
            }

            &.item3 {
              width: 320px;
              .xl {
                .int {
                }
              }
            }

            &.moreIt {
              width: 620px;
              margin-right: 0;
              .nbbox {
                width: 200px;
                margin-right: 10px;
                float: left;
                &:nth-child(3n) {
                  margin-right: 0;
                }
                .tit {
                  padding-left: 10px;
                  font-size:12px;
                  font-weight:bold;
                  color:rgba(24,144,255,1);
                  margin-bottom: 3px;
                }
                .xl {
                  .int {
                  }
                }
              }
            }
          }
        }
      }
    }

  }

  .quill-editor {
    height: 220px;
  }

</style>
